{template 'header'}
<style type="text/css">
.my-page {
    background-color:#f7f5f5;
}
.my-page .avatar-wrap {
    padding:28px;
    position:relative;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-page .avatar {
    width:70px;
    height:70px;
    border-radius:100%;
    overflow:hidden;
    margin-right:20px;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
.my-page .student-info {
    width:calc(100% - 140px);
}
.my-page .student-info .name {
    color:#fff;
    font-size:18px;
    font-weight:500;
}
.my-page .student-info .sno {
    color:#fff;
    margin-top:8px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .student-card {
    width:0.71rem;
    height:0.22rem;
    color:#FE5264;
    font-size:0.14rem;
    position:absolute;
    background-color:#FFF357;
    right:0;
    margin-top:-0.11rem;
    top:50%;
    border-top-left-radius:0.11rem;
    border-bottom-left-radius:0.11rem;
    padding-left:4px;
}
.my-page .student-card img {
    width:9px;
    height:9px;
    margin-left:2px;
}
.my-page .menu {
    margin-bottom:70px;
}
.my-page .menu ul a, .my-page .menu ul div {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:16px;
    background-color:#fff;
}
.my-page .menu ul a img, .my-page .menu ul div img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.my-page .menu ul a .arrow, .my-page .menu ul div .arrow {
    margin-right:15px;
}
.my-page .menu ul a:active {
    background:#ececec;
}
.my-page .menu ul .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:64px;
}
.my-page .menu ul .my-li-ctx .tab-new {
    width:39px;
    margin-left:8px;
    margin-top:-14px;
}
.my-page .menu ul .wallet-price {
    margin-right:8px;
    position:relative;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .menu ul .grow-balance {
    margin-right:8px;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.mem-my-page {
    background-color:#fff;
}
.mem-my-page .header {
    position:relative;
    height:200px;
}
.mem-my-page .header .my1 {
    height:200px;
    width:100%;
}
.mem-my-page .header .user-wrap {
    position:absolute;
    width:84%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    top:73px;
}
.mem-my-page .header .user-wrap .my2 {
    width:100%;
    height:117px;
}
.mem-my-page .header .user-wrap .user-pic-wrap {
    position:absolute;
    width:50px;
    height:50px;
    left:50%;
    top:-35px;
    border-radius:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.mem-my-page .header .user-wrap .user-pic-wrap .user-pic {
    width:100%;
    height:100%;
    border-radius:50%;
}
.mem-my-page .header .user-wrap .user-pic-wrap .crown {
    position:absolute;
    width:28px;
    left:9px;
    top:-20px;
}
.mem-my-page .header .user-wrap .user-name {
    position:absolute;
    top:24px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-weight:600;
    font-size:16px;
}
.mem-my-page .header .user-wrap .user-sno {
    position:absolute;
    top:46px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:15px;
}
.mem-my-page .header .user-wrap .endtime {
    position:absolute;
    top:70px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:12px;
}
.mem-my-page .header .content-top {
    position:absolute;
    bottom:0;
    height:35px;
    width:100%;
}
.mem-my-page .header .content-top img {
    width:100%;
    height:100%;
}
.mem-my-page .menu {
    background:#fff;
}
.mem-my-page .menu ul a {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:48px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:15px;
}
.mem-my-page .menu ul a img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.mem-my-page .menu ul a .arrow {
    margin-right:15px;
}
.mem-my-page .menu ul a:active {
    background:#ececec;
}
.mem-my-page .menu .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:44px;
}
.my-read-note-page .all-read-note .note-item {
    background-color:rgb(255, 255, 255);
    padding:30px 20px;
    margin:0px auto 1px;
    max-width:480px;
}
.my-read-note-page .all-read-note .note-item .note-head {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:18px;
}
.my-read-note-page .all-read-note .note-item .note-head p {
    color:rgb(74, 74, 74);
    font-size:14px;
    font-weight:bold;
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-content {
    background-color:rgb(246, 246, 246);
    padding:15px 12px;
    border-radius:10px;
    margin-bottom:17px;
}
.my-read-note-page .all-read-note .note-item .note-content pre {
    color:rgb(74, 74, 74);
    font-size:14px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-read-note-page .all-read-note .note-item .note-footer p {
    color:rgb(155, 155, 155);
    font-size:14px;
    text-align:right;
}
.my-read-note-page .all-read-note .note-item .note-footer div {
    color:rgb(155, 155, 155);
    font-size:14px;
    line-height:18px;
    position:relative;
}
.my-read-note-page .all-read-note .note-item .note-footer div img {
    width:16px;
    margin-right:8px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block {
    width:30px;
    top:-40px;
    position:absolute;
    right:-5px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block img {
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block span {
    position:absolute;
    top:0px;
    left:0px;
    color:rgb(255, 255, 255);
    display:inline-block;
    width:100%;
    text-align:center;
    line-height:17px;
    font-size:0.12rem;
}
.my-read-note-page .no-note {
    background-color:rgb(255, 255, 255);
    text-align:center;
    height:100vh;
}
.my-read-note-page .no-note img {
    width:240px;
    margin-top:60px;
}
.my-read-note-page .no-note .no-note-tip {
    color:rgb(74, 74, 74);
    font-size:19px;
    font-weight:bold;
    margin-top:25px;
}
.my-read-note-page .no-note .to-public-note {
    color:rgb(155, 155, 155);
    font-size:16px;
    margin-top:17px;
}
.my-read-note-page .no-note .public-btn {
    text-align:center;
    position:fixed;
    bottom:68px;
    left:0px;
    right:0px;
    margin:auto;
    max-width:400px;
}
.my-page {
    background-color:#f7f5f5;
}
.my-page .avatar-wrap {
    padding:28px;
    position:relative;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-page .avatar {
    width:70px;
    height:70px;
    border-radius:100%;
    overflow:hidden;
    margin-right:20px;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
.my-page .student-info {
    width:calc(100% - 140px);
}
.my-page .student-info .name {
    color:#fff;
    font-size:18px;
    font-weight:500;
}
.my-page .student-info .sno {
    color:#fff;
    margin-top:8px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .student-card {
    width:0.71rem;
    height:0.22rem;
    color:#FE5264;
    font-size:0.14rem;
    position:absolute;
    background-color:#FFF357;
    right:0;
    margin-top:-0.11rem;
    top:50%;
    border-top-left-radius:0.11rem;
    border-bottom-left-radius:0.11rem;
    padding-left:4px;
}
.my-page .student-card img {
    width:9px;
    height:9px;
    margin-left:2px;
}
.my-page .menu {
    margin-bottom:70px;
}
.my-page .menu ul a, .my-page .menu ul div {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:16px;
    background-color:#fff;
}
.my-page .menu ul a img, .my-page .menu ul div img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.my-page .menu ul a .arrow, .my-page .menu ul div .arrow {
    margin-right:15px;
}
.my-page .menu ul a:active {
    background:#ececec;
}
.my-page .menu ul .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:64px;
}
.my-page .menu ul .my-li-ctx .tab-new {
    width:39px;
    margin-left:8px;
    margin-top:-14px;
}
.my-page .menu ul .wallet-price {
    margin-right:8px;
    position:relative;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .menu ul .grow-balance {
    margin-right:8px;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.mem-my-page {
    background-color:#fff;
}
.mem-my-page .header {
    position:relative;
    height:200px;
}
.mem-my-page .header .my1 {
    height:200px;
    width:100%;
}
.mem-my-page .header .user-wrap {
    position:absolute;
    width:84%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    top:73px;
}
.mem-my-page .header .user-wrap .my2 {
    width:100%;
    height:117px;
}
.mem-my-page .header .user-wrap .user-pic-wrap {
    position:absolute;
    width:50px;
    height:50px;
    left:50%;
    top:-35px;
    border-radius:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.mem-my-page .header .user-wrap .user-pic-wrap .user-pic {
    width:100%;
    height:100%;
    border-radius:50%;
}
.mem-my-page .header .user-wrap .user-pic-wrap .crown {
    position:absolute;
    width:28px;
    left:9px;
    top:-20px;
}
.mem-my-page .header .user-wrap .user-name {
    position:absolute;
    top:24px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-weight:600;
    font-size:16px;
}
.mem-my-page .header .user-wrap .user-sno {
    position:absolute;
    top:46px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:15px;
}
.mem-my-page .header .user-wrap .endtime {
    position:absolute;
    top:70px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:12px;
}
.mem-my-page .header .content-top {
    position:absolute;
    bottom:0;
    height:35px;
    width:100%;
}
.mem-my-page .header .content-top img {
    width:100%;
    height:100%;
}
.mem-my-page .menu {
    background:#fff;
}
.mem-my-page .menu ul a {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:48px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:15px;
}
.mem-my-page .menu ul a img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.mem-my-page .menu ul a .arrow {
    margin-right:15px;
}
.mem-my-page .menu ul a:active {
    background:#ececec;
}
.mem-my-page .menu .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:44px;
}
.growthstar-page .header {
    width:100%;
    height:207px;
    padding:28px 32px;
    position:relative;
    background:linear-gradient(270deg, rgba(254, 81, 100, 1) 0%, rgba(254, 148, 111, 1) 100%);
    color:#fff;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    padding-top:0.53rem;
}
.growthstar-page .header .bg-pic {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
}
.growthstar-page .header .header-top {
    position:relative;
}
.growthstar-page .header .header-top p {
    font-weight:500;
    line-height:20px;
}
.growthstar-page .header .header-top .detail {
    width:44px;
    height:18px;
    border-radius:3px;
    border:1px solid rgba(255, 255, 255, 0.8);
    font-size:0.12rem;
    margin-left:9px;
    line-height:18px;
}
.growthstar-page .header .header-top .detail:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .header-top .detail img {
    width:6px;
    height:9px;
    margin-left:2px;
}
.growthstar-page .header .avaible-count {
    font-size:48px;
    line-height:67px;
}
.growthstar-page .header .exchange-gift {
    width:144px;
    height:35px;
    box-shadow:0px 2px 16px 0px rgba(255, 0, 29, 0.23);
    border-radius:44px;
    border:1px solid rgba(255, 255, 255, 1);
    font-size:0.18rem;
    font-weight:500;
    line-height:25px;
    position:relative;
}
.growthstar-page .header .exchange-gift:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .exchange-gift img {
    width:18px;
    height:18px;
    margin-right:5px;
}
.growthstar-page .header .rules {
    width:84px;
    height:22px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:11px 0px 0px 11px;
    text-align:center;
    position:absolute;
    top:18px;
    right:0;
    line-height:22px;
    font-size:0.12rem;
}
.growthstar-page .star-rechange {
    width:100%;
    height:96px;
    background:rgba(255, 255, 255, 1);
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .star-rechange .rechange-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .star-rechange .rechange-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .star-rechange .rechange-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .star-rechange .rechange-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task {
    width:100%;
    height:156px;
    background:rgba(255, 255, 255, 1);
    margin-top:12px;
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .task .title {
    font-size:0.16rem;
    color:#4a4a4a;
    line-height:22px;
    margin-bottom:26px;
    padding-left:14px;
}
.growthstar-page .task .task-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .task .task-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .task .task-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .task .task-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task .task-right img {
    width:68px;
}
.growthstar-page .more-tip {
    height:20px;
    font-size:0.14rem;
    color:rgba(155, 155, 155, 1);
    line-height:20px;
    text-align:center;
    margin-top:15px;
}
.growthstar-page .g-modal .content {
    padding:0;
}
.growthstar-page .dialog-content {
    text-align:left;
}
.growthstar-page .dialog-content .title {
    display:block;
    text-align:center;
    font-size:20px;
    color:rgba(29, 29, 29, 1);
    line-height:58px;
    height:58px;
    background:rgba(247, 247, 247, 1);
}
.growthstar-page .dialog-content .main {
    padding:0.2rem 0.28rem;
}
.growthstar-page .dialog-content p {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    margin-bottom:8px;
}
.growthstar-page .dialog-content .black-color {
    color:#4a4a4a;
    margin-bottom:2px;
}
.growthstar-detail-page .item {
    width:100%;
    height:72px;
    background:rgba(255, 255, 255, 1);
    border-bottom:1px solid #eee;
    padding:20px 24px;
}
.growthstar-detail-page .item .item-left .icon {
    margin-right:15px;
}
.growthstar-detail-page .item .item-left .word .title {
    font-size:16px;
    ß color:rgba(74, 74, 74, 1);
    line-height:22px;
}
.growthstar-detail-page .item .item-left .word .time {
    font-size:12px;
    color:rgba(155, 155, 155, 1);
    line-height:17px;
}
.growthstar-page .header {
    width:100%;
    height:207px;
    padding:28px 32px;
    position:relative;
    background:linear-gradient(270deg, rgba(254, 81, 100, 1) 0%, rgba(254, 148, 111, 1) 100%);
    color:#fff;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    padding-top:0.53rem;
}
.growthstar-page .header .bg-pic {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
}
.growthstar-page .header .header-top {
    position:relative;
}
.growthstar-page .header .header-top p {
    font-weight:500;
    line-height:20px;
}
.growthstar-page .header .header-top .detail {
    width:44px;
    height:18px;
    border-radius:3px;
    border:1px solid rgba(255, 255, 255, 0.8);
    font-size:0.12rem;
    margin-left:9px;
    line-height:18px;
}
.growthstar-page .header .header-top .detail:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .header-top .detail img {
    width:6px;
    height:9px;
    margin-left:2px;
}
.growthstar-page .header .avaible-count {
    font-size:48px;
    line-height:67px;
}
.growthstar-page .header .exchange-gift {
    width:144px;
    height:35px;
    box-shadow:0px 2px 16px 0px rgba(255, 0, 29, 0.23);
    border-radius:44px;
    border:1px solid rgba(255, 255, 255, 1);
    font-size:0.18rem;
    font-weight:500;
    line-height:25px;
    position:relative;
}
.growthstar-page .header .exchange-gift:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .exchange-gift img {
    width:18px;
    height:18px;
    margin-right:5px;
}
.growthstar-page .header .rules {
    width:84px;
    height:22px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:11px 0px 0px 11px;
    text-align:center;
    position:absolute;
    top:18px;
    right:0;
    line-height:22px;
    font-size:0.12rem;
}
.growthstar-page .star-rechange {
    width:100%;
    height:96px;
    background:rgba(255, 255, 255, 1);
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .star-rechange .rechange-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .star-rechange .rechange-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .star-rechange .rechange-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .star-rechange .rechange-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task {
    width:100%;
    height:156px;
    background:rgba(255, 255, 255, 1);
    margin-top:12px;
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .task .title {
    font-size:0.16rem;
    color:#4a4a4a;
    line-height:22px;
    margin-bottom:26px;
    padding-left:14px;
}
.growthstar-page .task .task-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .task .task-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .task .task-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .task .task-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task .task-right img {
    width:68px;
}
.growthstar-page .more-tip {
    height:20px;
    font-size:0.14rem;
    color:rgba(155, 155, 155, 1);
    line-height:20px;
    text-align:center;
    margin-top:15px;
}
.growthstar-page .g-modal .content {
    padding:0;
}
.growthstar-page .dialog-content {
    text-align:left;
}
.growthstar-page .dialog-content .title {
    display:block;
    text-align:center;
    font-size:20px;
    color:rgba(29, 29, 29, 1);
    line-height:58px;
    height:58px;
    background:rgba(247, 247, 247, 1);
}
.growthstar-page .dialog-content .main {
    padding:0.2rem 0.28rem;
}
.growthstar-page .dialog-content p {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    margin-bottom:8px;
}
.growthstar-page .dialog-content .black-color {
    color:#4a4a4a;
    margin-bottom:2px;
}
.growthstar-recharge-page .main-block {
    width:100%;
    background:rgba(255, 255, 255, 1);
    padding:0.24rem 0.2rem;
}
.growthstar-recharge-page .main-block .recharge-count {
    font-size:14px;
    color:#000；;
    line-height:20px;
}
.growthstar-recharge-page .main-block .rules {
    color:#6A7FA5;
}
.growthstar-recharge-page .main-block .price-block {
    margin-top:0.24rem;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.growthstar-recharge-page .main-block .price-block .price-item {
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    width:32%;
    height:64px;
    background:rgba(247, 247, 247, 1);
    border-radius:6px;
    border:1px solid #F7F7F7;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
    margin-bottom:10px;
}
.growthstar-recharge-page .main-block .price-block .price-item.active {
    border:1px solid rgba(254, 81, 100, 1);
}
.growthstar-recharge-page .main-block .price-block .price-item.active .count {
    color:rgba(254, 81, 100, 1);
}
.growthstar-recharge-page .main-block .price-block .price-item.active .price {
    color:rgba(254, 81, 100, 1);
}
.growthstar-recharge-page .main-block .price-block .price-item .count {
    font-size:18px;
    color:rgba(74, 74, 74, 1);
    line-height:25px;
}
.growthstar-recharge-page .main-block .price-block .price-item .price {
    font-size:12px;
    color:rgba(151, 151, 151, 1);
    line-height:17px;
}
.growthstar-recharge-page .other-price {
    padding:0.24rem 0.2rem;
    width:100%;
    height:62px;
    font-size:18px;
    font-weight:500;
    color:rgba(0, 0, 0, 1);
    line-height:25px;
    border-top:1px solid #F7F7F7;
    background-color:#fff;
}
.growthstar-recharge-page .other-price img {
    width:10px;
    height:16px;
}
.growthstar-recharge-page .price-input-block {
    width:284px;
    height:241px;
    background:rgba(255, 255, 255, 1);
    border-radius:6px;
    padding:0.3rem 0.2rem;
    position:relative;
    margin-top:-20px;
}
.growthstar-recharge-page .price-input-block .title {
    font-size:16px;
    color:rgba(74, 74, 74, 1);
    line-height:22px;
}
.growthstar-recharge-page .price-input-block .recharge {
    position:relative;
}
.growthstar-recharge-page .price-input-block .recharge input {
    width:100%;
    height:0.67rem;
    font-size:0.4rem;
    padding:0.07rem 0;
    border:none;
    outline:none;
    border-bottom:1px solid #eee;
    line-height:0.67rem;
    padding-left:0.1rem;
}
.growthstar-recharge-page .price-input-block .recharge .shink-cursor {
    width:2px;
    height:0.51rem;
    background-color:#4a4a4a;
    position:absolute;
    left:0rem;
    top:0.1rem;
    -webkit-animation:cursorShink 4s infinite both;
    animation:cursorShink 4s infinite both;
}
@-webkit-keyframes cursorShink {
    0%, 30%, 50%, 70%, 90%, 100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1;
    }
    20%, 40%, 60%, 80% {
        -webkit-transform:scale(0.94);
        -ms-transform:scale(0.94);
        transform:scale(0.94);
        opacity:0;
    }
}
@keyframes cursorShink {
    0%, 30%, 50%, 70%, 90%, 100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1;
    }
    20%, 40%, 60%, 80% {
        -webkit-transform:scale(0.94);
        -ms-transform:scale(0.94);
        transform:scale(0.94);
        opacity:0;
    }
}
.growthstar-recharge-page .price-input-block .rechange-btn {
    width:242px;
    height:44px;
    box-shadow:0px 2px 16px 0px rgba(255, 0, 29, 0.23);
    border-radius:44px;
    font-size:20px;
    font-weight:500;
    color:rgba(255, 255, 255, 1);
    line-height:44px;
    text-align:center;
    margin-top:0.38rem;
}
.growthstar-recharge-page .price-input-block .close-btn {
    position:absolute;
    width:29px;
    height:29px;
    bottom:-40px;
    left:0;
    right:0;
    margin:0 auto;
}
.growthstar-recharge-page .g-modal .content {
    padding:0;
}
.growthstar-recharge-page .dialog-content {
    text-align:left;
}
.growthstar-recharge-page .dialog-content .title {
    display:block;
    text-align:center;
    font-size:20px;
    color:rgba(29, 29, 29, 1);
    line-height:58px;
    height:58px;
    background:rgba(247, 247, 247, 1);
}
.growthstar-recharge-page .dialog-content .main {
    padding:0.2rem 0.28rem;
}
.growthstar-recharge-page .dialog-content p {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    margin-bottom:8px;
    position:relative;
    padding-left:0.1rem;
}
.growthstar-recharge-page .dialog-content p:before {
    content:'';
    position:absolute;
    width:6px;
    height:6px;
    border-radius:3px;
    background-color:rgba(151, 151, 151, 1);
    top:0.1rem;
    left:0;
}
/* -----------------------------模态框样式-------------------------------- */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 根据浏览器定位 */
            z-index: 1; /* 放在底部 */
            left: 0;
            bottom:0;
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            overflow: hidden; /* 允许滚动 */
            background-color: rgba(0,0,0,0.4); /* 背景色 */
        }
        /*模态框内容*/
        .modal-content {
            display: flex; /*采用flexbox布局*/
            flex-direction: column; /*垂直排列*/
            position: absolute;
            bottom:0;
            background-color: #fefefe;
            /* margin: 127% 0;  */
            padding: 20px 20px 35px;
            width: 90%;
            animation: topDown 0.4s; /*自定义动画，从模态框内容上到下出现*/
            box-sizing: content-box;
            font-size: 16px;
        }
        @keyframes topDown {
            from {bottom: -100px; opacity: 0}
            to {bottom:0px; opacity: 1}
        }
        .bottom_pay_btn{
            position:absolute;
            bottom:10px;
            width:89%;
            /* margin-left:1%; */
            height:33px;
            line-height: 33px;
            color: #fff;
            text-align: center;
            background:#dc443b;
            border-radius:4px;
            
        }
        /*模态框头部*/
        .modal-header {
            display: flex; /*采用flexbox布局*/
            flex-direction: row; /*水平布局*/
            align-items: center; /*内容垂直居中*/
            justify-content: space-between; 
        }
        /*关闭X 样式*/
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        /* 选择支付 */
        .payway{
            padding:2vh 0;
            font-size: 14px;
            text-align: left;
        }
</style>
    <div class="growthstar-recharge-page">
        <div class="main-block">
            <div class="g-flex row-between col-center">
                <p class="recharge-count">成长星余额：{php echo $mem['score']>0?$mem['score']:0}个</p>
                <p onclick="showRule()" class="rules">查看充值规则</p>
            </div>
            {if $cfg['recharge']}
            <div class="price-block g-flex row-between">
                {loop $cfg['recharge'] $k $v}
                <div onclick="goRecharge('{$v['money']}')" class="price-item g-flex row-center col-center false">
                    <p class="count">{$v['score']}个</p>
                    <p class="price">售价¥{$v['money']}</p>
                </div>
                {/loop}
            </div>
            {/if}
        </div>
        <div onclick="showRecharge()" class="other-price g-flex row-between col-center">充值其他金额
            <img src="{RES}img/right1.png" alt="">
        </div>
        <div id="other-money" class="" style="display: none;">
            <div class="g-mask"></div>
            <div class="price-input-block g-fixed-center">
                <p class="title">充值金额</p>
                <div class="recharge"><span class="shink-cursor"></span>
                    <input type="tel" id="reecharge-money" pattern="[0-9]" required="" placeholder="0.00">
                </div>
                <div onclick="getRecharge()" class="rechange-btn g-main-bg">立即充值</div>
                <img onclick="hideRecharge()" src="{RES}img/close.png" class="close-btn">
            </div>
        </div>
        <div id="recharge-rule" class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="dialog-content">
                        <div class="dialog-content">
                            <div class="title">充值须知</div>
                            <div class="main">
                                {$cfg['score_rule1']}
                            </div>
                        </div>
                    </div>
                </div>
                <div onclick="hideRule()" class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
        <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">请填写正确的整数值</div>
    </div>
    
    {if $cfg['creditswitch']==1}
              <!-- 模态框 -->
	    <div id="myModal" class="modal">
	        <div class="modal-content">
	            <div class="modal-header">
	                <div>支付方式</div>
	                <!-- <span id="closeBtn" class="close">×</span> -->
	            </div>
	            <div class="modal-body">
	                <label><div class="payway" style="border-bottom:1px solid #f5f5f5"><span>余额支付</span><input type="radio" name="paytype" value="2" checked style="float:right"/></div></label>
	                <label><div class="payway" style="margin-bottom:2vh;"><span>微信支付</span><input type="radio" name="paytype" value="1" style="float:right"/></div></label>
	            </div>
	            <div class="bottom_pay_btn">支付</div>
	        </div>
	    </div>
	{/if}
</div>
{template 'loading'}
<script>
{if $cfg['creditswitch']==1}
/*建立模态框对象*/
var modalBox = {};
/*获取模态框*/
modalBox.modal = document.getElementById("myModal");
/*获得关闭按钮*/
// modalBox.closeBtn = document.getElementById("closeBtn");
/*模态框显示*/
modalBox.show = function() {
    this.modal.style.display = "block";
}
/*模态框关闭*/
modalBox.close = function() {
    this.modal.style.display = "none";
}
/*当用户点击模态框内容之外的区域，模态框也会关闭*/
modalBox.outsideClick = function() {
    var modal = this.modal;
    window.onclick = function(event) {
        if(event.target == modal) {
            modal.style.display = "none";
        }
    }
}
/*模态框初始化*/
modalBox.init = function() {
    var that = this;
    // this.closeBtn.onclick = function() {
    //  that.close();
    // }
    this.outsideClick();
}
modalBox.init();
$('.bottom_pay_btn').click(function(){
	goRecharge(price,1);
})
{/if}
function getRecharge(){
	var money= $('#reecharge-money').val();
	goRecharge(money)
}
var isSubmit = false;
var orderid = 0;
var price = 0;
function goRecharge(money,showtype){
	if(isSubmit) return false;
	price = money;
	if(money == 0 || !money){
		msgTip('充值金额不能为0');
		return false;
	}
	{if $cfg['creditswitch']==1}
		if(!showtype){
			modalBox.show();
			return;
		}
		var paytype = $('input[name=paytype]:checked').val();
		if(paytype==2 && money>Number("{$fans['credit2']}")){
			msgTip("余额不足，剩余余额：{$fans['credit2']}");
			return;
		}
	{else}
		var paytype = 1;
	{/if}
	isSubmit = true;
	$.ajax({
		url:'{php echo $this->murl("recharge")}',
		data: {money: money,paytype:paytype},
		type: "post",
		success: function(data){
			isSubmit = false;
			data = JSON.parse(data);
			console.log(data)
			if(data.code==1){
				var json = data.res;
				orderid = json.orderid;
				WeixinJSBridge.invoke('getBrandWCPayRequest', json, function (res) {
                      if (res.err_msg === "get_brand_wcpay_request:ok") {
                    	  checkorder();
                      } else {
                    	  msgTip('支付失败')
                      }
                  });
			}else if(data.code==2){
				orderid = data.orderid;
				checkorder();
			}else{
				msgTip(data.msg);
			}
		}
	});	
}
function checkorder(){
	if(orderid > 0){
		$.ajax({
			 type:'POST',
			 data:{orderid:orderid},
			 url:'{php echo $this->murl("checkrecharge");}',
			 success:function(data){
				  if(data == 1){
					  msgTip('充值成功',function(){
						  location.href = '{php echo $this->murl("myscore");}';
					  });
				  }else{	 
					  setTimeout(function(){
						  checkorder();
					  },1000);
				  }
			 }
		 });
	}
}
function showRule(){
	$('#recharge-rule').removeClass('g-hidden')
}
function hideRule(){
	$('#recharge-rule').addClass('g-hidden')
}
function showRecharge(){
	$('#other-money').show()
}
function hideRecharge(){
	$('#other-money').hide()
}
</script>

</body></html>